<script setup>
import { computed } from 'vue'

import { storeToRefs } from 'pinia'
import useAppStore from '@/stores/app'
import { RouterView, useRoute } from 'vue-router'
import enUS from 'ant-design-vue/es/locale/en_US'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import 'dayjs/locale/zh-cn'
const appStore = useAppStore()
const { language } = storeToRefs(appStore)
const theme = {
  components: {
    Button: {
      colorPrimary: colorPrimary,
      colorPrimaryActive: colorPrimary,
      colorPrimaryHover: colorPrimaryHover
    },
    Input: {
      colorTextDisabled: '#999999',
      colorBgContainerDisabled: '#f7f7f7'
    }
  }
}
const colorPrimary = '#729DB0'
const colorPrimaryHover = '#97B7C5'
const route = useRoute()
const key = computed(() => {
  return route.fullPath
})
</script>

<template>
  <div id="main-app">
    <a-config-provider :theme="theme" :locale="language == 'zh' ? zhCN : enUS">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </a-config-provider>
  </div>
</template>

<style scoped>
#main-app {
  height: 100%;
  background: #f6f9fc;
  .footer {
    background: #f6f9fc;
    position: absolute;
    z-index: 999;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font-family: PingFang-SC-Regular, PingFang-SC;
    padding: 12px 0;
    .copyright {
      font-size: 12px;
      color: #666;
      .icon {
        width: 19px;
        height: 19px;
        transform: translateY(5px);
        display: inline-block;
        background-image: url('@/assets/images/ba.png');
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
    span {
      &.privacy {
        &:hover {
          color: #f89000;
          cursor: pointer;
          font-size: 12px;
        }
      }
    }
    a {
      text-decoration: none;
      color: #666;
      &:hover {
        color: #f89000;
        cursor: pointer;
        font-size: 12px;
      }
      &:last-child {
        margin-left: 20px;
      }
    }
  }
}
</style>
